<template>
  <div class="content-left-wrap">
    <Card>
      <div slot="title">
        <left-top />
      </div>
      <div class="table-wrap">
        <SimpleTable
          :tableColums="tableColums"
          :tableData="tableData"
          :tableLoading="tableLoading"
          :pageSize="getTablePageParams.pageSize"
          :pageNum="getTablePageParams.pageNum"
          @handleRefresh="handleRefresh"
          @handleChangePage="handleChangePage"
          @hanleRowClick="hanleRowClick"
          :keyUp="true"
          :stopKeyUp="stopTableKeyUp"
        />
      </div>
    </Card>
  </div>
</template>
<script>
import { each, reduce } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import SimpleTable from '@/commons/SimpleTable'
import LeftTop from '../LeftTop'
import tableColums from './tableColums'

const { mapActions, mapGetters, mapState } = createNamespacedHelpers('historyVerify')

export default {
  name: 'history-verify-left',
  components: {
    LeftTop,
    SimpleTable
  },
  computed: {
    ...mapGetters(['getTablePageParams']),
    ...mapState([
      'tableData',
      'tableLoading',
      'stopTableKeyUp',
      'currentMeterId',
      'currentGasCls',
      'userQueryParams',
      'xxlhParams',
      'selectedTableRow'
    ]),
    tableColums() {
      return tableColums
    }
  },
  watch: {
    xxlhParams() {
      let _byxs = null
      if (this.xxlhParams.length > 1) {
        _byxs = this.getByxs()
      } else if (this.xxlhParams.length === 1) {
        _byxs = 0
      }
      this.changeByxs(_byxs)
      const _row = this.selectedTableRow == null ? null : this.tableData.list[this.selectedTableRow]
      this.modifyTagNav(_row, _byxs)
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    ...mapActions([
      'loadTableData',
      'changeTablePageNum',
      'changeCurrentMeterId',
      'changeStopTableKeyUp',
      'loadKXData',
      'changeCurrentGasCls',
      'changeUserQueryParams',
      'changeByxs',
      'changeSelectedTableRow'
    ]),
    /**
     * desc: 点击表格重置按钮
     * param {type}
     * return {type} void
     */
    handleRefresh() {
      this.changeCurrentGasCls()
      this.changeUserQueryParams({
        unitId: undefined,
        unitName: undefined
      })
      this.changeTablePageNum(1)
      this.loadTableData()
    },
    /**
     * desc: 点击表格分页
     * param {type}
     * return {type} void
     */
    handleChangePage(num) {
      this.changeTablePageNum(num)
      this.loadTableData({
        meterGasClass: this.currentGasCls,
        ...this.userQueryParams
      })
    },
    /**
     * desc: 表格行点击
     * param {type}
     * return {type} void
     */
    hanleRowClick(row = {}, index) {
      this.changeSelectedTableRow(index)
      const { meterId } = row
      if (this.currentMeterId !== meterId) {
        this.changeCurrentMeterId(meterId)
        this.loadKXData()
        this.changeStopTableKeyUp(false)
        this.modifyTagNav(row)
      }
    },
    modifyTagNav(row, byxs = null) {
      const { unitName, meterId } = row
      const _newList = []
      each(this.$store.state.app.tagNavList, item => {
        const { name, meta = {}, ...rest } = item
        if (name === 'history-verify') {
          const _first = meta.title && meta.title.split('(')[0]
          meta.title = `${_first}(${unitName} ${meterId}；变异系数 ${byxs})`
          _newList.push({
            name,
            meta,
            ...rest
          })
        } else {
          _newList.push(item)
        }
      })
      this.$store.commit('setTagNavList', _newList)
    },
    getByxs() {
      const _data = this.xxlhParams
      const _dataLen = _data.length
      const _kSum = reduce(
        _data,
        (sum, item) => {
          const { k } = item
          return sum + k
        },
        0
      )
      const _pjz = _kSum / _dataLen
      const _pjSum = reduce(
        _data,
        (sum, item) => {
          const { k } = item
          return sum + Math.pow(k - _pjz, 2)
        },
        0
      )
      const _pjc = Math.sqrt(_pjSum / _dataLen)

      return `${((_pjc / _pjz) * 100).toFixed(2)}%`
    }
  }
}
</script>
<style lang="less" scoped>
.content-left-wrap {
  width: 100%;
  height: 100%;

  .table-wrap {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
